<template>
  <el-tree
    ref="tree"
    @check-change="checkChange"
    :default-checked-keys="defaultCheckedKeys"
    :check-strictly="checkStrictly"
    :show-checkbox="showCheckbox"
    :node-key="nodeKey"
    :default-expanded-keys="defaultExpandedKeys"
    :data="data"
    :props="props">
  </el-tree>
</template>

<script>
export default {
  name: 'CTree',
  data () {
    return {
      init: false
    }
  },
  props: {
    data: {
      type: Array
    },
    nodeKey: String,
    checkStrictly: Boolean,
    showCheckbox: {
      type: Boolean,
      default: false
    },
    props: {
      default () {
        return {
          children: 'children',
          label: 'label',
          icon: 'icon',
          disabled: 'disabled'
        }
      }
    },
    disabledCheckbox: Boolean,
    defaultCheckedKeys: Array,
    defaultExpandedKeys: Array
  },
  computed: {},
  methods: {
    getCheckedKeys (leafOnly) {
      return this.$refs['tree'].getCheckedKeys(leafOnly)
    },
    checkChange (node, isCheck) {
      if (isCheck && !this.init) {
        if (!this.$lodash.isEmpty(node.nodes)) {
          const tree = this.$refs['tree']
          tree.setCheckedNodes([...tree.getCheckedNodes(), ...node.nodes])
        }
      }
    },
    setCheckedKeys (keys, leafOnly) {
      this.init = true
      this.$refs['tree'].setCheckedKeys(keys, leafOnly)
      // 避免和点击重复触发的重复
      setTimeout(() => {
        this.init = false
      }, 500)
    }
  }
}
</script>

<style>

</style>
